<template>
	<view class="content-box">

		<view class="top-box">
			<image class="bg" src="/static/me/bg.png" mode="widthFix"></image>
			<view class="tabs-box">
				<u-tabs :list="tabList" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
					lineWidth="40rpx" lineHeight="12rpx" :current="current" :lineColor="`url(${lineBg}) 100% 100%`"
					@click="clickTabs"></u-tabs>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 320rpx);">
			<view class="scroll-box">

				<view class="order-box" v-for="item in orderList"
					@click="$routeTo('/pages/orderDetails/orderDetails?id='+item.id)">
					<view class="order-type">
						{{$statusText(item.status)}}
					</view>
					<view class="order-num">
						订单号:{{item.orderNo}}
					</view>
					<view class="order-title">
						{{item.driverTypeName}}
					</view>
					<view class="location-box">
						<image src="/static/order/send-ico_.png" mode=""></image>
						{{item.startLocation}}
					</view>
					<view class="location-line">

					</view>
					<view class="location-box">
						<image src="/static/order/receive-ico_.png" mode=""></image>
						{{item.endLocation}}
					</view>
					<view class="time">
						<!-- 						<image src="../../static/logo.png" mode=""></image> -->
						<u-icon name="clock" color="#AEAEAE" size="36rpx"></u-icon>
						<text>上门时间：{{item.expectPickTimeStr}}</text>

					</view>

					<view class="order-bottom">
						<view class="money-type">
							{{item.payStatusDescription}}
						</view>
						<view class="order-btn">
							<view class="btn btn1" v-if="item.status==6"
								@click.stop="$routeTo('/pages/order/addFeed/addFeed?id='+item.id)">
								投食喂水
							</view>
							<!-- @click="popupShow=true" -->
							<view class="btn btn1" v-if="item.status==4&&item.payStatus==2"
								@click.stop="cancel(item.id)">
								撤销抢单
							</view>
							<view class="btn btn2" v-if="item.status==4&&item.payStatus==2"
								@click.stop="payment(item.id)">
								催款
							</view>
							<view class="btn btn2" v-if="item.status==5&&item.payStatus==3"
								@click.stop="verifyShow=true;verifyType=1;verifyOrderId=item.id">
								提宠
							</view>
							<view class="btn btn2" v-if="item.status==6"
								@click.stop="verifyShow=true;verifyType=2;verifyOrderId=item.id">
								已送达
							</view>

						</view>
					</view>

					<view class="hint" v-if="item.status==6">
						12小时内至少上传一次
					</view>
				</view>


				<u-empty v-if="!orderList" mode="order" marginTop="250rpx" icon="http://cdn.uviewui.com/uview/empty/order.png">
				</u-empty>
			</view>

		</scroll-view>


		<u-popup :show="popupShow" mode="center" round="16rpx">
			<view class="popup-box">
				<image src="../../static/success-ico.png" mode=""></image>
				<view class="">
					催款成功
				</view>
			</view>
		</u-popup>

		<u-popup :show="verifyShow" mode="center" round="16rpx" closeOnClickOverlay closeable @close="verifyShow=false">
			<view style="padding: 40rpx;padding-bottom: 60rpx;">
				<view style="font-size: 28rpx;font-weight: 700;text-align: center;">
					输入{{verifyType===1?'收宠码':'取宠码'}}
				</view>
				<view style="padding: 40rpx 20rpx;">
					<u-code-input v-if="verifyShow" v-model="verifyValue" mode="line" :maxlength="4" dot
						@finish="verifyFinish"></u-code-input>
				</view>
			</view>
		</u-popup>

		<u-modal :show="revocationShow" @close="closeRevocation" @cancel="closeRevocation" @confirm="cancelOrder"
			closeOnClickOverlay width="622rpx" title="您确定要撤销抢单吗" showCancelButton cancelText="我再想想"
			confirmColor="#FFCE4E">
			<view class="slot-content">
				<view style="font-size: 28rpx;color: #666666;margin-bottom: 20rpx;">
					定金订单可无条件撤销抢单
				</view>
			</view>
		</u-modal>

		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lineBg: '',
				tabList: [{
					name: '待取宠',
					value: 5
				}, {
					name: '护送中',
					value: 6
				}],
				current:1,
				activeStyle: {
					color: '#000000',
					fontSize: '32rpx',
					fontWeight: 'bold'
				},
				inactiveStyle: {
					color: '#666666',
					fontSize: '28rpx',
					fontWeight: '100'
				},
				popupShow: false,
				revocationShow: false,
				verifyShow: false,
				verifyType: 1,
				orderList: [],
				verifyValue: '',
				cancelOrderId: '',
				verifyOrderId: ''
			}
		},
		watch: {
			popupShow() {
				if (this.popupShow) setTimeout(() => {
					this.popupShow = false
				}, 1500)
			}
		},

		onShow() {
			if(getApp().globalData.statusType){
				this.current = this.tabList.findIndex(item => item.value == getApp().globalData.statusType)
				getApp().globalData.statusType=''
			}
			
		},
		onLoad() {
			this.$nextTick(() => {
			   // 解决uview u-tab，下划线异常
			    this.current = 0;
				this.upData()
			  });
		},
		methods: {
			upData() {
				let data = {
					page: 1,
					size: 100,
					status: this.tabList[this.current].value
				}
				this.$myRequest('/api/driver/order/v1/page/ordering', data).then(res => {
					this.orderList = res.data.data
				})

			},
			clickTabs(res) {
				this.current = res.index
				this.upData()
				console.log(res)
			},
			closeRevocation() {
				this.revocationShow = false
			},
			verifyFinish(takeCode) {
				let url = ''
				let path = ''
				let data = {
					orderId: this.verifyOrderId
				}
			
				if (this.verifyType === 1) {
					url = '/api/driver/order/v1/check/takeCode'
					path = './collect/collect?id=' + this.verifyOrderId
					data.takeCode = takeCode
				} else {
					url = '/api/driver/order/v1/check/distributionCode'
					path = './collect/collect?id=' + this.verifyOrderId + '&type=true'
					data.distributionCode = takeCode

				}
				
				
				
				this.verifyShow=false
				this.verifyValue=''
				this.$myRequest(url, data).then(res => {
					
					uni.navigateTo({
						url: path
					})
				})
			},
			payment(orderId) {
				this.$myRequest('/api/driver/order/v1/demand/payment', {
					orderId
				}, 'POST').then(res => {
					this.popupShow = true
				})
			},
			cancel(orderId) {
				this.cancelOrderId = orderId
				this.revocationShow = true
			},
			cancelOrder() {
				this.$myRequest('/api/driver/order/v1/cancel', {
					orderId: this.cancelOrderId
				}, 'POST').then(res => {
					this.revocationShow = false
					this.upData()
				})
			},
		}
	}
</script>

<style lang="scss">
	.popup-box {
		width: 502rpx;
		height: 336rpx;

		image {
			width: 158rpx;
			height: 144rpx;
			margin: 38rpx auto 32rpx auto;
		}

		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		text-align: center;
	}

	.top-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 40rpx;
		padding-left: 0;
		box-shadow: 0rpx 6rpx 12rpx rgba(184, 184, 184, 0.16);
		position: relative;
		z-index: 1;
		padding-top: 214rpx;
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}

		.tabs-box {
			width: 360rpx;
		}
	}

	.scroll-box {
		padding: 20rpx;
		min-height: calc(100vh - 320rpx);
		background-color: #ffffff;

		.order-box {
			margin-bottom: 24rpx;
			background-color: #ffffff;
			position: relative;
			border-radius: 20rpx;
			padding: 10rpx 20rpx;
			box-shadow: 0rpx 0rpx 12rpx rgba(207, 207, 207, 0.53);

			.order-type {
				width: 124rpx;
				height: 50rpx;
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(164, 149, 255, 0.2);
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #788EFF;
			}

			.order-num {
				font-size: 24rpx;
				color: #999999;
				text-align: right;
			}

			.order-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin: 26rpx 0 22rpx 0;
			}

			.location-box {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 22rpx;
				}
			}

			.location-line {
				width: 2rpx;
				height: 32rpx;
				background: #CBCBCB;
				margin: 10rpx 19rpx;
			}

			.time {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				padding: 36rpx 0 20rpx 0;
				border-bottom: 2rpx solid #EBEBEB;

				>text {
					margin-left: 24rpx;
				}

				// image {
				// 	width: 34rpx;
				// 	height: 34rpx;
				// 	margin-right: 24rpx;
				// }
			}

			.order-bottom {
				display: flex;
				align-items: center;
				padding: 24rpx 0 16rpx 0;

				.money-type {
					color: #FFCE4E;
					font-size: 26rpx;
				}

				.order-btn {
					flex: 1;
					display: flex;
					align-items: center;
					// flex-direction: row-reverse;
					justify-content: flex-end;

					.btn {
						width: 144rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						font-size: 26rpx;
						border-radius: 28rpx;
						margin: 0 10rpx;
					}

					.btn1 {
						border: 2rpx solid #FFCE4E;
						color: #FFCE4E;
					}

					.btn2 {
						background: #FFCE4E;
						border: 2rpx solid #FFCE4E;
						color: #FFFFFF
					}
				}
			}

			.hint {
				text-align: right;
				font-size: 24rpx;
				color: #999999;
				padding-right: 60rpx;
				padding-bottom: 10rpx;
			}
		}
	}
</style>